<template>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item class="van-swipe-item" v-for="item in 4" :key="item">{{ item }}</van-swipe-item>
    </van-swipe>

    <main class="main">
        <span class="name">HUAWEI Meta40 Pro + 5G 全网通 125G</span>
        <span class="delivery">免邮费 顺风快递</span>
        <span class="price">¥5399</span>
        
        

        <van-sticky offset-top="1.22667rem">
            <div class="nav-func">
                <span
                    :class="{
                        'func-item': true,
                        'func-active': funcActive === index
                    }" v-for="(item,index) in funcList" :key="index"
                    :style="index === (funcList.length-1) ? 'border-right: none;' : ''"
                    @click="changeFuncActive(index)"
                >{{ item.name }}</span>
            </div>
        </van-sticky>
    </main>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-action-bar-button type="warning" text="加入购物车" color="linear-gradient(to right,#6bd8d8, #1baeae)" />
      <van-action-bar-button type="danger" color="linear-gradient(to right, #0dc3c3, #098888)" text="立即购买" />
    </van-action-bar>
</template>

<script lang='ts'>
import { defineComponent,ref,Ref } from 'vue'
import router from '../config/router'
export default defineComponent({
    setup() {

        const funcList = [
            {name: '商品',},
            {name: '评价',},
            {name: '详情',},
            {name: '推荐',},
        ]

        const onClickIcon = () => {
            router.push('/shopping-cart')
        }

        const funcActive:Ref<number> = ref(0)
        const changeFuncActive  = (index: number):void => {
            funcActive.value = index
        }

        return {
            funcList,
            onClickIcon,
            funcActive,
            changeFuncActive
        }
    }
})
</script>


<style lang="less" scoped>
.my-swipe {
    width: 100%;
    height: 10rem;
    background-color: #39a9ed;
}

.main {
    display: flex;
    flex-direction: column;
    padding-bottom: 1.5rem;
    width: 100%;
    height: 20rem;
    background-color: #fff;

    .name {
        font-size: .4375rem;
        margin-bottom: .125rem;
        padding-left: .375rem;
    }

    .delivery {
        font-size: .375rem;
        color: #888;
        margin-bottom: .125rem;
        padding-left: .375rem;
    }

    .price {
        color: #f63515;
        font-size: .5rem;
        padding-left: .375rem;
        margin-bottom: .25rem;
    }

    .nav-func {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: .125rem 0;

        .func-item {
            flex: 1;
            text-align: center;
            border-right: 1px solid #888;
            font-size: .40625rem;
        }

        .func-active {
            color: @base-color;
        }
    }
}
</style>